<template lang="html">
  <div class="toBuy">
      <div class="header">
      	<div @click="goback()" class="goback">
     		   <span>返回</span>
     	   </div>
        <div class="navlist">
          <ul>
            <li><a href="javascript:void(0)" @click="goaction('#anchor-'+1)">商品</a></li>
            <li><a href="javascript:void(0)" @click="goaction('#anchor-'+2)">评论</a></li>
            <li><a href="javascript:void(0)" @click="goaction('#anchor-'+3)">详情</a></li>
            <li><a href="javascript:void(0)" @click="goaction('#anchor-'+4)">推荐</a></li>
          </ul>
        </div>
      </div>
     	<div  :id="'anchor-' + 1" class="mui-slider goodsbanner">
     		<div class="mui-slider-group mui-slider-loop">
     			<div class="mui-slider-item mui-slider-item-duplicate">
      			<a href="#"><img src="../../static/img/goodsBanner1.jpg" /></a>
      		</div>
          <div class="mui-slider-item">
      			<a href="#"><img src="../../static/img/goodsBanner1.jpg" /></a>
      		</div>
      		<div class="mui-slider-item">
      			<a href="#"><img src="../../static/img/goodsBanner2.jpg" /></a>
      		</div>
      		<div class="mui-slider-item">
      			<a href="#"><img src="../../static/img/goodsBanner3.jpg" /></a>
      		</div>
      		<div class="mui-slider-item">
      			<a href="#"><img src="../../static/img/goodsBanner4.jpg" /></a>
      		</div>
      		<!--支持循环，需要重复图片节点-->
      		<div class="mui-slider-item mui-slider-item-duplicate">
      			<a href="#"><img src="../../static/img/goodsBanner4.jpg" /></a>
      		</div>
     	</div>
     </div>
     <span class="price"><b>{{one.brandPrice}}</b></span>
     <p><span class="title1">{{one.brandName}}</span><span class="title2">碟飞典雅天文台精钢自动机械男表(424.13.40.20.01.001)</span></p>
     <div class="main">
       <p>大陆货源 &nbsp;&nbsp; 2-4天内发货</p>
       <p>此商品为特例品，不支持使用优惠券且不参与会员折扣</p>

     </div>
     <div class="list">
     	<ul>
       	<li><a>分期付款</a><p class="lie">0首付12期免息，开通领礼券&nbsp;&nbsp;></p></li>
       	<li><a>到店自提</a><p class="lie">查看店铺地址&nbsp;&nbsp;></p></li>
       	<li><a>微信管家</a><p class="lie">点击复制管家微信号&nbsp;&nbsp;></p></li>
       </ul>
       <dl v-for="item in one.serviceList">
       	<dt><img :src="item.icon"></dt>
       	<dd>{{ item.name }}</dd>
       </dl>
     </div>
     <div class="detail">
     	<h3>商品信息</h3>
     	<div v-for="item in ones">
     		<div class="detail1">{{ item.name }}</div>
     		<div class="detail2">{{ item.value }}</div>
     	</div>
     </div>
     <div :id="'anchor-' + 2" class="ping">
     	<h3>用户评价</h3><span>综合评分5.0&nbsp;&nbsp;></span>
      <div class="user" v-for='info in four.commentList'>
        <div class="user_info">
          <img :src="info.userImg" alt="">
          {{ info.userName }}
        </div>
        <div class="user_content">
          {{ info.content }}
        </div>
      </div>
     </div>
     <div :id="'anchor-' + 3" class="xiangqing" >
     	<h3>商品详情</h3>
      <div v-for="item in one.productInfo">
     		<p class="goodsdes" v-for="items in item" v-if="items.type == 1">{{ items.info }}</p>
     		<p v-for="items in item" v-if="items.type == 0" class="last"><img :src="items.info"></p>
     	</div>
     </div>
     <div class="bootom">
     	<div @click="$store.commit('saveMsg',one)">
     		<span @click="tishi">加入购物车</span></div>
     	<div @click='tuBuy()'>立即购买</div>
     </div>

  </div>
</template>

<script>
import store from '../store/store'
export default {
	data(){
		return{
			result:{},
      one:{},
      ones:{},
      three:{},
      four:{}
			// results:{}
		}
	},
		methods:{
		goback(){
			history.back()
		},
		tishi(){
			this.$message('添加购物车成功')
		},
		saveMsg(){
//    this.$router.push('../../car')
      console.log(this.one);
		},
    tuBuy() {
    	 console.log(this.one);
      this.$router.push('../../car')
    },
    goaction(selector) {
      var anchor = this.$el.querySelector(selector)
      document.body.scrollTop = anchor.offsetTop
    }
	},
	mounted() {
		var gallery = mui('.mui-slider');
		gallery.slider({
			interval:0 //自动轮播周期，若为0则不自动播放，默认为0；
		});
	},
	created(){
    this.axios.get("../static/data/goods1.json").then(data =>{
			this.one= data.data;
      this.ones = data.data.productInfo.attrList
		})	
	},
	store,
}
</script>

<style lang="css">
  .toBuy {
    width: 100%;
    background: white;
    position: relative;
  }
  .toBuy .header {
    width: 100%;
    height: .8rem;
    background: #efedf7;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .goodsbanner {
    margin-top: .8rem;
  }
  .header .goback {
    width: 13%;
    text-align: center;
    /*font-size: .2rem;*/
  }
  .header .navlist {
    width: 70%;
  }
  .header .navlist ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
	/*.shang{
		width: 100%;
		height:84.2rem;
		background:white;
	}*/
	.toBuy .price{
		color: red;
		font-size: .5rem;
		padding-left: 3%;
	}
	.toBuy .title1{
		color:#CDB994;
		font-weight: bold;
		font-size: .3rem;
	}
	.toBuy>p{
		padding-left: 5%;
		margin-top: .3rem;
	}
	.toBuy .title2{
		color:black;
		font-size: .3rem;
	}
	.main{
		margin-top:.7rem;
		padding-left:5%;
		border-bottom: .02rem solid gainsboro;
	}
	.main>p{
		margin-bottom: 5%;
		margin-top:-.2rem;
		color: black;
	}
	.list ul li{
		list-style: none;
		border-bottom: .03rem solid gainsboro;
		height: 1rem;
		line-height: 1rem;
	}
	a{
		text-decoration: none;
		color: black;
	}
	.list a{
		padding-left: 3%;
		font-weight: bold;
		float: left;
	}
	.list ul li p{
		display:block;
		font-size: .25rem;
		color: black;
	}
	.list .lie{
		text-align: right;
		padding-right: 2%;
    color: #999;
	}
	.list>dl{
		display: inline-block;
		width: 25%;
		text-align: center;
		padding:.5rem 0;
		background: #FAFAFA;
    font-size: .2rem;
	}
	.list dl dt img{
		width: 25%;
	}
	.detail{
		padding-bottom: .3rem;
		border-bottom: .02rem solid gainsboro;
    color: #999;
	}
	.detail>h3{
		padding: .3rem 4%;
	}
	.detail1{
		width: 25%;
		display: inline-block;
		height: .6rem;
		padding-left: 4%;
		font-size: .27rem;
		line-height: .6rem;
	}
	.detail2{
		width: 70%;
		float: right;
		display: inline-block;
		text-align: left;
		padding-right: 2%;
		height: .5rem;
		line-height: .65rem;
		font-size: .27rem;
	}
	.ping{
		/*height: 1.5rem;*/
		border-bottom: .02rem solid gainsboro;
    color: #999;
	}
  .ping .user_info {
    margin-left: 5%;
  }
  .user {
    width: 100%;
    margin-bottom: .5rem;
    /*height: 1.5rem;*/
  }
  .ping .user_info img {
    width: 10%;
    height: 10%;
    border-radius: 50%;
    vertical-align: middle;
  }
  .ping .user_content {
    margin-left: 15%;
  }
	.ping h3{
		display: inline-block;
		line-height: 1.4rem;
		margin-left: 3%;
		color: grey;
	}
	.ping span{
		margin-left: 30%;
	}
	.xiangqing{
		border-bottom: .02rem solid gainsboro;
		padding-bottom: 1rem;
	}
  .xiangqing .goodsdes {
    margin-left: 4%;
  }
	.xiangqing>div .last{
		width:90%;
		margin:0 auto;
	}
	.xiangqing>div p img{
		width: 100%;
		margin:0 auto;
	}
	.xiangqing>h3,.foot>h3{
		color: grey;
		margin:.3rem 4%;
	}
	.xiangqing>div p:first-child{
		color: black;
		font-size: .25rem;
		margin:0 4%;
	}
	.foot>div p{
		color: black;
		font-size: .25rem;
		margin:0 4%;
    padding-bottom: .2rem;
	}
	.bootom{
		width: 100%;
    height: 1rem;
		position: fixed;
    left: 0;
    right: 0;
		bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
	}
	.bootom>div{
		width: 50%;
		height: 1rem;
		color: white;
		text-align: center;
		line-height: 1rem;
		font-size: .35rem;
	}
	.bootom>div:first-child{
		background: black;
	}
	.bootom>div:last-child{
		background: red;
	}
</style>
